<template>
  <main-tpl>
    <template #main>
      <div class="video-list">
        <div class="video-list-button">
          <a-button type="primary" @click="add">新增</a-button>
          <a-button style="margin-left: 8px" type="primary" @click="init">刷新</a-button>
        </div>
        <div class="video-list-table">
          <a-table
            class="margin-top-16"
            :dataSource="dataList"
            :pagination="pagination"
            :columns="columns"
            size="middle"
            @change="tableChange"
            :loading="loading"
          >
            <template #bodyCell="{ column, record }">
              <template v-if="column.key === 'createTime'">
                {{ dayjs(record.createTime).format("YYYY-MM-DD HH:mm:ss") }}
              </template>
              <template v-if="column.key === 'updateTime'">
                {{ dayjs(record.updateTime).format("YYYY-MM-DD HH:mm:ss") }}
              </template>
              <template v-if="column.key === 'groupId'">
                {{ getGroupName(record.groupId) }}
              </template>
              <template v-if="column.key === 'status'">
                <span v-if="record.status === 0">运行中</span>
                <span v-else-if="record.status === 1">成功</span>
                <span v-else>失败</span>
              </template>
              <template v-if="column.key === 'operation'">
                <a-button type="link" @click="toDetail(record)">查看详情</a-button>
                <a-button style="padding-left: 8px" danger type="link" @click="deleteTask(record)"
                  >删除</a-button
                >
              </template>
            </template>
          </a-table>
        </div>
        <UnderstandAddModal
          :modalVisible="modalVisible"
          @submit="handleSubmit"
          @cancel="handleCancel"
        ></UnderstandAddModal>
      </div>
    </template>
  </main-tpl>
</template>
<script>
import { useRouter } from "vue-router";
import tablePagination from "@/composables/tablePagination";
import { onMounted, reactive, toRefs } from "vue";
import UnderstandAddModal from "./components/UnderstandAddModal";
import dayjs from "dayjs";
import { message } from "ant-design-vue";
import { getVideoTaskList, getGroupList } from "@/api/marathon";

const columns = [
  {
    title: "id",
    dataIndex: "id",
    key: "id",
    width: 50,
  },
  {
    title: "标识名称",
    dataIndex: "name",
    key: "name",
  },
  {
    title: "分组",
    dataIndex: "groupId",
    key: "groupId",
    width: 100,
  },
  {
    title: "视频唯一标识",
    dataIndex: "code",
    key: "code",
    width: 300,
  },
  {
    title: "状态",
    dataIndex: "status",
    key: "status",
    width: 100,
  },
  {
    title: "创建时间",
    dataIndex: "createTime",
    key: "createTime",
    width: 180,
  },
  {
    title: "更新时间",
    dataIndex: "updateTime",
    key: "updateTime",
    width: 180,
  },
  {
    title: "操作",
    dataIndex: "operation",
    key: "operation",
    width: 150,
  },
];

export default {
  name: "UnderstandList",
  components: {
    UnderstandAddModal,
  },
  setup() {
    const init = () => {
      getList();
    };

    const state = reactive({
      loading: false,
      ...tablePagination(init), //pagination tableChange
      modalVisible: false,
      dataList: [],
      groupOptions: [],
    });

    onMounted(() => {
      init();
      initOptions();
    });

    const getList = () => {
      state.loading = true;
      const dto = {
        pageNumber: state.pagination?.current,
        pageSize: state.pagination?.pageSize,
      };
      getVideoTaskList(dto).then((res) => {
        if (res.result === true) {
          let { responseList = [], total } = res?.data;
          state.dataList = responseList;
          state.pagination.total = total;
        } else {
          message.error("获取视频列表失败：" + res.message);
        }
        state.loading = false;
      });
    };
    const handleCurrentChange = (val) => {
      state.pagination.current = val;
      getList();
    };

    const router = useRouter();
    const toDetail = (record) => {
      router.push({
        path: "/understand/detail",
        query: {
          id: record.id,
        },
      });
    };

    const initOptions = () => {
      const dto = {
        pageNumber: 1,
        pageSize: 1000,
      };
      getGroupList(dto).then((res) => {
        if (res.result === true) {
          let { responseList = [] } = res?.data;
          state.groupOptions = responseList;
        } else {
          message.error("获取分组列表失败：" + res.message);
        }
        state.loading = false;
      });
    };

    const getGroupName = (groupId) => {
      return state.groupOptions?.find((item) => item.id === groupId)?.name || "--";
    };

    const add = () => {
      state.modalVisible = true;
    };

    const handleCancel = () => {
      state.modalVisible = false;
    };

    const deleteTask = (record) => {
      console.log(record);
      message.warn("功能暂未实现");
    };

    const handleSubmit = () => {
      handleCurrentChange(1);
    };

    return {
      ...toRefs(state),
      columns,
      toDetail,
      dayjs,
      add,
      handleSubmit,
      handleCancel,
      getGroupName,
      deleteTask,
      init,
    };
  },
};
</script>
<style lang="scss" scoped>
.video-list {
  height: 100%;
}
</style>
